<template>
  <div class="container">
    <div class="header">
      <div class="title">航道通告专栏</div>
      <div class="time">
        <img src="../../static/images/icon-time.png" alt="">
        <span>{{ currentYearMonth1 }}-{{ currentYearMonth2 }}</span>
      </div>
    </div>
    <div class="search">
      <van-search
        v-model="searchValue"
        @search="onSearch"
        show-action
        :clearable="false"
        placeholder="请输入要查询的通告名称"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="no-data" v-if="isShowNoData">暂无数据</div>
    <div class="notice-info" v-for="(item,index) in noticeData" :key="index">
      <div @click="handleClick(item.linkurl)">
        <div class="top">{{ item.title }}</div>
        <div class="bottom">
          <div class="source">来源:{{ item.source }}</div>
          <div class="release-time">发布时间:{{ item.time }}</div>
        </div>
      </div>
    </div>
    <div style="text-align: center;padding: 5px 0;color: #8C8C8C;">
      <div style="margin-bottom: 5px;">广东省交通运输厅</div>
      <div style="margin-bottom: 5px;">数据来源：广东省航道事务中心</div>
    </div> 
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import { useRouter } from "vue-router";
  // 引入api
  import {
    getWaterwayNoticeInfo, //获取航道通告专栏信息
  } from "../../utils/apis";

  const router = useRouter();

  //获取日期
  const currentYearMonth1 = ref("");
  const currentYearMonth2 = ref("");

  const allData = ref([]);
  const noticeData = ref([]);
  const getWaterwayNoticeInfoFn = () => {
    getWaterwayNoticeInfo().then((res) => {
      if(res.code === 200 && res.data.length){
        allData.value = res.data; 
        noticeData.value = res.data;    
      }
    });
  };

  const searchValue = ref('');
  const isShowNoData = ref(false);
  const onSearch = () => {
    if(searchValue.value == ""){
      isShowNoData.value = false;
      noticeData.value = allData.value;
    }else{     
      isShowNoData.value = false; 
      const searchData = allData.value.filter((item) => {
        return item.title.includes(searchValue.value)
      });
      noticeData.value = searchData;
      if(noticeData.value.length === 0){
        isShowNoData.value = true;
      }
    }    
  };

  const baseApi = `${import.meta.env.VITE_APP_BASE_API}admin/file`;
  const handleClick = (contents) => {
    let fileUrl = baseApi + contents.split("/file")[1];
    window.open(fileUrl);
    // let reg =  /<a[^>]+href\s*=\s*['"]([^"']+)['"][^>]*>/gi   
    // if(contents.match(reg)){     
    //   // window.open(`http://210.76.81.180/traffic-channel/notice${contents.match(reg)[0].slice(25,-2)}`);   
    //   window.open(`${import.meta.env.VITE_APP_BASE_API}notice${contents.match(reg)[0].slice(25,-2)}`);           
    // }else{
    //   let matchReg = /<img.*?(?:>|\/>)/gi;
    //   let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
    //   let data = [];
    //   let arr = contents.match(matchReg);
    //   arr.forEach(item => {
    //     let src = item.match(srcReg);
    //     // data.push(`http://210.76.81.180/traffic-channel/notice${src[1]}`)
    //     data.push(`${import.meta.env.VITE_APP_BASE_API}notice${src[1]}`)
    //   });

    //   router.push({
    //     path: "/pdf",
    //     query: { content: data.join(',') },
    //     // replace: true
    //   });
    // }    
  };

  onMounted(() => {
    if(sessionStorage.getItem("watermarkTxt")){
      //加水印
      watermark.init({ 
        watermark_x: -30, // 水印起始位置x轴坐标
        watermark_y: -20, // 水印起始位置Y轴坐标
        watermark_x_space: 20, // 水印x轴间隔
        watermark_y_space: 80, // 水印y轴间隔
        watermark_alpha: 0.07, // 水印透明度
        watermark_fontsize: '14px', // 水印字体大小
        watermark_width: 100, // 水印宽度
        watermark_height: 30,
        watermark_txt: sessionStorage.getItem("watermarkTxt"), // 水印的内容
        watermark_angle: 25, // 水印倾斜度数
        watermark_rows: 0, // 水印行数
        watermark_cols: 0, // 水印列数
        watermark_font: '微软雅黑', // 水印字体
        watermark_color: 'black', // 水印字体颜色 
      });
    }
    
    currentYearMonth1.value = new Date().getFullYear() + ".01";
    currentYearMonth2.value = new Date().format("yyyy.MM");     

    getWaterwayNoticeInfoFn();
  });
</script>

<style lang="scss" scope>
  .container{
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    .header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.08);
      .title {
        color: #262626;
        font-size: 18px;
        font-weight: 500;
        padding: 12px 0px 10px 20px;
        position: relative;
      }
      .time {
        display: flex;
        align-items: center;
        color: #8C8C8C;        
        font-size: 14px;
        padding-right: 20px;
        img{
          width: 18px;
          height: 18px;
          padding-right: 5px;
        }
      }
    }
    .notice-info{
      margin: 20px;
      background: #FFFFFF;
      box-shadow: 0px 2px 8px 1px rgba(0,0,0,0.08);
      border-radius: 8px;
      opacity: 1;
      padding: 16px;
      .top{
        color: #000000;
        font-size: 12px;
        font-weight: 400;
      }
      .bottom{
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        zoom: 0.8;
        font-weight: 400;
        color: #8C8C8C;
        margin-top: 10px;
      }
    }
    .search{
      margin: 10px 0px;
      // background: #FFFFFF;
      box-shadow: 0px 2px 8px 1px rgba(0,0,0,0.08);
      border-radius: 8px;
      opacity: 1;
    }
    .no-data{
      display: flex;
      justify-content: center;
      margin: 20px;
      font-size: 14px;
    }
  }
</style>